<template>
	<view class="u-wrap">
		<view class="ddTitle">
			<view class="ddTitleleft">
				{{shopInfo.address}}
			</view>
			<view class="ddTitleRight">
				<view @click="changeOrderType(2)"
					:class="[orderType == 2 ? 'ddTitleRightZT ddTitleRightHover' : 'ddTitleRightZT']">
					自提
				</view>
				<view @click="changeOrderType(1)"
					:class="[orderType == 1 ? 'ddTitleRightWM ddTitleRightHover' : 'ddTitleRightWM']">
					外卖
				</view>
			</view>
		</view>
		<view class="tuijian">
			<view class="jdhs" @click="jdhs ">
				<view :class="[istj == 1 ? 'jdhsTitle': '']">
					经典花束
				</view>
				<view class="jdhsIcon" :style="[{opacity: istj == 1 ? 1:0}]">
					<image src="../../static/image/hy.png"></image>
				</view>
			</view>
			<view class="jdhs" @click="dztj">
				<view :class="[istj == 2 ? 'jdhsTitle': '']">
					店长推荐
				</view>
				<view class="jdhsIcon" :style="[{opacity: istj == 2 ? 1:0}]">
					<image src="../../static/image/hy.png"></image>
				</view>
			</view>
		</view>
		<view class="tuijianhua">
			<template v-for="(item,index) in arr">
				<view class="huaItem" @click="tjhszd(item)">

					<image :src="JSON.parse(item.goodsImages)[0]" mode=""></image>
					<view class="huaItempice">
						{{item.price}}
					</view>
				</view>

			</template>

			<!-- <view class="huaItem">
				<image src="http://s499jfz9e.hb-bkt.clouddn.com/store/me/hua1.png" mode=""></image>
				<view class="huaItempice">
					119
				</view>
			</view>
			<view class="huaItem">
				<image src="http://s499jfz9e.hb-bkt.clouddn.com/store/me/hua1.png" mode=""></image>
				<view class="huaItempice">
					119
				</view>
			</view>
			<view class="huaItem">
				<image src="http://s499jfz9e.hb-bkt.clouddn.com/store/me/hua1.png" mode=""></image>
				<view class="huaItempice">
					119
				</view>
			</view> -->
		</view>
		<view class="u-menu-wrap">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
				<view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
					:class="[current == index ? 'u-tab-item-active' : '']" :data-current="index"
					@tap.stop="swichMenu(index)">
					<text class="u-line-1">{{ item.label }}</text>
				</view>
			</scroll-view>
			<block v-for="(item, index) in tabbar" :key="index">
				<scroll-view scroll-y class="right-box" v-if="current == index">
					<view class="page-view">
						<view class="class-item" v-for="(v, i) in item.children" :key="i" v-if="item.children.length">
							<view class="item-title">
								<text>{{ v.label }}</text>
							</view>
							<view class="item-container">
								<view class="thumb-box" v-for="(item1, index1) in v.goodsList" :key="index1"
									v-if="v.goodsList.length">
									<image class="item-menu-image" :src="item1.goodsImages" @click="toGoodsList(item1)"
										mode=""></image>
									<!-- -->
									<view class="item-menu-name">
										<view class="item-menu-name-title">
											{{ item1.goodsName }}
										</view>
										<!-- <view class="item-menu-name-bq">
											新款特价
										</view>
										<view class="item-menu-name-ys">
											月售29
										</view> -->
										<view class="item-menu-name-jiage">
											<view class="item-menu-name-jg">
												￥{{item1.price}}
											</view>
											<view class="item-menu-name-jia" @click="addShop(item1,index,i,index1,1)">
												+
											</view>
											<view class="item-menu-name-jia" v-if="item1.isSku !== 0"
												style="color: black;background: #fff;line-height: 20px;">
												{{item1.isSku}}
											</view>
											<view v-if="item1.isSku !== 0" class="item-menu-name-jia"
												style="color: black;background: #fff;border:1px solid #003B40"
												@click="addShop(item1,index,i,index1,2)">
												-
											</view>
											<!-- <view class="item-menu-name-jia">
												+
											</view> -->
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</block>
		</view>
		<view class="xiadan">
			<image src="../../static/image/meiguihuacai.png" mode=""></image>
			<view class="xiadanprice">
				￥{{totalMoeny}}
			</view>
			<view class="xiadanBtn" @click="buyNow">
				立即下单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabbar: [],
				scrollTop: 0, //tab标题的滚动条位置
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				// 查询详情商品的回显信息
				goodsInfo: {
					skuList: [],
					goodsMall: {}
				},
				// 模板运费的查询参数
				params: {
					goodsMallId: "1450637837592",
					freightId: 603223520160,
					regionId: 110101,
				},
				// 跳转下单页面需要的参数
				orderParams: {
					goodsMallId: '',
					goodsMallSkuId: '',
					goodsMallNum: 1,
					goodsImages: '',
					goodsName: '',
					integral: '',
					specValue: '',
					freightRule: '',
					freightPrice: 0,
					freightId: 0,
					price: ''
				},
				itemDetail: {},
				orderType: 1,
				istj: 1,
				arr: [],
				shopInfo: {},
				shopList: [],
				goodsMallIdList: [],
				totalMoeny: 0,
				shoppingCartIds: []
			};
		},
		onLoad(option) {
			// console.log(option,"外卖")
			this.orderType = option.orderType || 1
			uni.setStorageSync('orderType', this.orderType)

			// 查询商城所有分类
			this.postQueryAllMallGoodsTypeList();
		},
		onShow() {
			this.current = uni.getStorageSync('current') || 0
			this.jdhs()
			this.getInfo()
		},
		methods: {
			tjhszd(item) {
				uni.setStorageSync('orderParams', encodeURIComponent(JSON.stringify(item)))
				console.log(uni.getStorageSync('orderParams'), "2222")
				uni.navigateTo({
					// url: '/pages/index/confirm-order/confirm-order'
					url: '../index/confirm-order/confirm-order'
				});
			},
			getInfo() {
				this.$u.api
					.postFindMallDetail()
					.then(res => {
						this.shopInfo = res.data
						console.log(this.shopInfo, "ress56444444444444444444")
					})
			},
			//经典花束
			jdhs() {
				this.istj = 1
				this.$u.api
					.postClassicBouquet()
					.then(res => {
						this.arr = []
						this.arr = res.data.rows.splice(0, 4)
					})
			},
			//店长推荐
			dztj() {
				this.istj = 2
				this.$u.api
					.postdianzhangboutique()
					.then(res => {
						this.arr = []
						this.arr = res.data.rows.splice(0, 4)
					})

			},
			//改变状态
			changeOrderType(num) {
				this.orderType = num
				uni.setStorageSync('orderType', this.orderType)
			},
			// 点击立即购买
			buyNow(item) {
				let list = []
				this.shopList.map((item) => {
					let obj = {
						goodsMallId: item.goodsMallId,
						goodsMallSkuId: item.goodsMal1SkuId || '', // 商品规格id
						goodsMallNum: item.isSku,
						goodsImages: item.goodsImages,
						price: item.price,
						goodsNum: item.isSku
					}
					list.push(obj)
				})
				uni.navigateTo({
					url: '../index/confirm-order/confirm-orders?orderParams=' + encodeURIComponent(JSON.stringify(
						list)) + '&isDetail="1"'
				});
			},
			// 跳转下单页面
			toConfirmOrder() {

				// console.log(this.orderParams, '-------------------------');
				this.disableBtn = false;
				uni.navigateTo({
					url: '../index/confirm-order/confirm-order?orderParams=' + JSON.stringify(this
						.orderParams)
				});
			},

			addShop(item, index1, index2, index3, num) {
				// console.log(item, "123")
				//type": 2 // 类型 1增加1个 2减少1个





				//判断增加还是减少
				if (num == 1) {
					//商品增加
					this.tabbar[index1].children[index2].goodsList[index3].isSku++;
					//如果是一个 加入购物车
					if (!this.tabbar[index1].children[index2].goodsList[index3].shoppingCartld) {
						//生成购物车参数
						let params = {
							goodsId: item.goodsMallId,
							goodsNum: item.isSku,
							goodsSkuId: item.goodsMallSkuId || ''
						}
						this.$u.api
							.postaddShoppingCart(params)
							.then(res => {
								this.tabbar[index1].children[index2].goodsList[index3].shoppingCartld = res.data
								console.log(this.tabbar[index1].children[index2].goodsList[index3],"1111")
								this.shoppingCartIds.push(res.data)
							})
					} else {
						//不然就是修改购物车数量
						console.log(this.tabbar[index1].children[index2].goodsList[index3],"222")
						let params = {
							type: 1,
							shoppingCartId: this.tabbar[index1].children[index2].goodsList[index3].shoppingCartld
						}
						this.$u.api
							.postupdateShoppingCart(params)
							.then(res => {
								console.log(res, "222")
								// this.postGetUserInfo()
							})
					}
				} else {
					
					//不然就是修改购物车数量
					let params = {
						type: 2,
						shoppingCartId: this.tabbar[index1].children[index2].goodsList[index3].shoppingCartId
					}
					this.$u.api
						.postupdateShoppingCart(params)
						.then(res => {
							console.log(res, "222")
							// this.postGetUserInfo()
						})
					this.tabbar[index1].children[index2].goodsList[index3].isSku--;
				}
				
				
				
				if (this.goodsMallIdList.length) {
					let numMallId = this.goodsMallIdList.indexOf(item.goodsMallId)
					console.log(numMallId, "numMallId")
					if (numMallId > -1) {
						this.goodsMallIdList[numMallId].isSku = item.isSku
					} else {
						this.goodsMallIdList.push(item.goodsMallId)
					}
				} else {
					this.goodsMallIdList.push(item.goodsMallId)
				}
				if (num == 1) {
					console.log(this.totalMoeny, "123")
					console.log(item.price, "123111")
					this.totalMoeny = this.totalMoeny + Number(item.price)
				} else {
					this.totalMoeny = this.totalMoeny - Number(item.price)
				}

				console.log(item, "itemasdsa")



				//购物车加减
				// if (item.goodsNum == 1 && num == 2) {
				// 					let params = {
				// 						shoppingCartIds: item.shoppingCartId
				// 					}
				// 					this.$u.api
				// 						.postremoveShoppingCart(params)
				// 						.then(res => {
				// 							console.log(res, "11111")
				// 							this.postGetUserInfo()
				// 						})
				// 				} else {
				// 					let params = {
				// 						type: num,
				// 						shoppingCartId: item.shoppingCartId
				// 					}
				// 					this.$u.api
				// 						.postupdateShoppingCart(params)
				// 						.then(res => {
				// 							console.log(res, "222")
				// 							this.postGetUserInfo()
				// 						})
				// 				}


			},

			// 查询商品详情
			postFindGoodsDetail() {
				this.$u.api
					.postFindGoodsDetail(this.params)
					.then(res => {
						console.log(res, '[普通商品详情页-查询商品详情接口]');
						// 设置商品标题
						uni.setNavigationBarTitle({
							title: res.data.goodsMall.goodsName
						});
						// 整理轮播图图片
						let arr = [];
						let newImage = JSON.parse(res.data.goodsMall.goodsImages);
						newImage.forEach(v => {
							arr.push({
								image: v
							});
						});
						res.data.goodsMall.newGoodsImages = arr;

						// 整理商品规格的显示
						if (res.data.skuList.length) {
							let spec = JSON.parse(res.data.goodsMall.specGroup);
							let arraySpec = [];
							// 整理规格格式，格式化成能够选择格式的数据
							for (let i in spec) {
								let obj = {},
									arr = [];
								obj.specName = i;
								spec[i].forEach(x => {
									arr.push({
										select: false,
										value: x
									});
								});
								obj.specValue = arr;
								arraySpec.push(obj);
							}
							// console.log(arraySpec, '[商品规格-格式整理成可选择的]');
							this.specGroup = arraySpec;
						}

						// 下单页面参数赋值
						this.orderParams.goodsImages = res.data.goodsMall.newGoodsImages[0].image;
						this.orderParams.goodsName = res.data.goodsMall.goodsName;
						this.orderParams.integral = res.data.goodsMall.integral;
						this.orderParams.freightRule = res.data.goodsMall.freightRule;
						this.orderParams.freightPrice = res.data.goodsMall.freightPrice;
						this.orderParams.freightId = res.data.goodsMall.freightId;
						this.orderParams.price = res.data.goodsMall.price;

						// 传值给全局变量
						this.goodsInfo = res.data;
					})
					.catch(err => {
						console.log(err);
					});
			},


			// 查询商城所有分类
			postQueryAllMallGoodsTypeList() {
				this.$u.api
					.postQueryAllMallGoodsTypeList()
					.then(res => {
						console.log(res, '[分类页-查询商城所有分类]');
						this.tabbar = res.data;
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 跳转商品列表页面
			toGoodsList(item) {
				// console.log(item,"item")
				// 当前页面商品id参数
				// this.params.goodsMallId = item.goodsMallId;
				// // 下单页面商品id参数整理
				// this.orderParams.goodsMallId = item.goodsMallId;
				// this.postFindGoodsDetail()

				// this.itemDetail = {...item}
				// this.buyNow(item)
				uni.navigateTo({
					url: '../index/goods/goods-details?goodsMallId=' + item.goodsMallId
				});
				// uni.navigateTo({
				// 	url: '../index/goods/goods-category-list?goodsTypeId=' + item.value + '&goodsTypeName=' + item
				// 		.label
				// });
			},
			getImg() {
				return Math.floor(Math.random() * 35);
			},
			// 点击左边的栏目切换
			async swichMenu(index) {
				if (index == this.current) return;
				this.current = index;
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select('.' + elClass)
						.fields({
							size: true
						}, res => {
							// 如果节点尚未生成，res值为null，循环调用执行
							if (!res) {
								setTimeout(() => {
									this.getElRect(elClass);
								}, 10);
								return;
							}
							this[dataVal] = res.height;
						})
						.exec();
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tuijian {
		width: 100%;
		height: 7vh;
		margin-top: 2vh;


		.jdhs {
			width: 22vw;
			font-size: 12px;
			text-align: center;
			height: 10vh;
			display: inline-block;

			.jdhsTitle {
				font-weight: bold;
			}

			.jdhsIcon {
				margin: 0 auto;
				width: 4vw;
				height: 3vh;
				overflow: hidden;

				image {
					width: 4vw;
					height: 1vh;
				}
			}
		}
	}

	.tuijianhua {
		width: 100vw;
		height: 22vh;

		.huaItem {
			width: 171rpx;
			height: 228rpx;
			margin-left: 1.8vw;
			float: left;

			image {
				width: 100%;
				height: 100%;
			}

			.huaItempice {
				width: 100%;
				height: 2vh;
				text-align: center;
				color: red;
			}
		}

	}

	.ddTitle {
		width: 100%;
		height: 6vh;
	}

	.ddTitleleft {
		width: 50%;
		height: 6vh;
		float: left;
		line-height: 6vh;
		padding-left: 4vw;
	}

	.ddTitleRight {
		width: 23%;
		height: 4vh;
		float: right;
		background: #F7F8FB;
		border-radius: 15px;
		font-size: 12px;
		line-height: 4vh;
		margin-top: 1vh;
		margin-right: 4vw;

		.ddTitleRightZT {
			width: 50%;
			height: 100%;
			text-align: center;
			background: transparent;
			border-radius: 15px;
			color: black;
			display: inline-block;
		}

		// .ddTitleRightZT:hover{
		// 	width: 50%;
		// 	height: 100%;
		// 	text-align: center;
		// 	background: #003B40;
		// 	border-radius: 15px;
		// 	color: white;
		// 	display: inline-block;
		// }
		.ddTitleRightWM {
			width: 50%;
			height: 100%;
			text-align: center;
			background: transparent;
			border-radius: 15px;
			color: black;
			display: inline-block;
		}

		.ddTitleRightHover {
			background: #003B40;
			color: white;
		}

		.ddTitleRightWM {
			width: 50%;
			height: 100%;
			display: inline-block;
			text-align: center;
		}
	}

	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
		padding-bottom: 12vh;
	}

	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	// .u-tab-item-active::before {
	// 	content: '';
	// 	position: absolute;
	// 	border-left: 4px solid $u-type-primary;
	// 	height: 32rpx;
	// 	left: 0;
	// 	top: 39rpx;
	// }

	.u-tab-view {
		width: 200rpx;
		height: 100%;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.right-box {
		background-color: rgb(250, 250, 250);
		// padding-bottom: 8vh;
	}

	.page-view {
		padding: 0;
	}

	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-menu-name {
		width: 300rpx;
		height: 201rpx;
		display: inline-block;
		vertical-align: top;
		margin-left: 2vw;

		.item-menu-name-title {
			line-height: 3.5vh;
			font-weight: bold;
			height: 220rpx;
		}

		.item-menu-name-bq {
			height: 3vh;
			line-height: 3vh;
			font-size: 12px;
		}

		.item-menu-name-ys {
			height: 3vh;
			line-height: 3vh;
			font-size: 12px;
		}

		.item-menu-name-jiage {
			width: 100%;
			height: 4vh;
		}

		.item-menu-name-jg {
			float: left;
			color: red;
			display: inline-block;
		}

		.item-menu-name-jia {
			float: right;
			width: 20px;
			height: 20px;
			background: #003B40;
			color: #fff;
			display: inline-block;
			text-align: center;
			line-height: 17px;
			border-radius: 50%;
			margin-left: 10rpx;
			// margin-top: -10rpx;

		}
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		display: block;
		width: 100%;
		margin: 2vh 0;
	}

	.item-menu-image {
		width: 201rpx;
		height: 268rpx;
	}

	.xiadan {
		position: fixed;
		bottom: 10px;
		width: 90%;
		height: 8vh;
		background: #000000;
		border-radius: 40px;
		margin: 0 5%;

		image {
			width: 72px;
			float: left;
			height: 80px;
			margin-top: -53rpx;
			margin-left: 56rpx;
		}

		.xiadanprice {
			display: inline-block;
			color: #fff;
			float: left;
			margin-left: 12rpx;
			line-height: 7vh;
		}

		.xiadanBtn {
			float: right;
			width: 29vw;
			background: #003B40;
			height: 8vh;
			border-bottom-right-radius: 40px;
			border-top-right-radius: 40px;
			color: #fff;
			text-align: center;
			line-height: 8vh;
			font-size: 16px;
		}
	}
</style>